<template>
  <div>
    <p>{{ state.name }}</p>
    <p>{{ state.desc }}</p>
    <button @click="fn">修改</button>
  </div>
</template>
<script>
import {reactive, computed, readonly} from 'vue'
export default{
  name:'App',
  setup(){
    const state = readonly({
      name:'陈尼克',
      desc:'你好'
    })
    const fn = ()=>{
      state.name='李尼克'
      state.desc='他好'
      console.log('state', state)
    }
    return {
      state,
      fn
    }
  }
}
</script>